<template lang="html">
  <div class="pingtuan-detail" v-if="details">
    <div class="goods">
      <div class="pic">
        <img class="max" :src="details.goods_icon">
      </div>
      <div class="content">
        <div class="icon">
          <img v-if="details.pt_info.pt_status == '拼团成功'" class="max" src="/static/pingtuan/details_img_succeed@2x.png">
          <img v-if="details.pt_info.pt_status == '拼团中'" class="max" src="/static/pingtuan/details_img_spelling@2x.png">
          <img v-if="details.pt_info.pt_status == '拼团失败'" class="max" src="/static/pingtuan/details_img_defeated@2x.png">
        </div>
        <div class="title">
          {{ details.pt_goods_name }}
        </div>
        <div class="nums">
          <span class="btn btn-already">已团{{ details.pt_success }}件</span>
          <span class="btn btn-total">{{ details.pt_number }}人团</span>
        </div>
        <div class="info">
          <div class="present-price">
            拼团价<span><em>￥</em>{{ details.pt_price }}</span>
          </div>
          <div class="purchase-price">
            原价： <span>¥{{ details.price }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="" v-if="details.pt_info.pt_status == '拼团中' || details.pt_info.pt_status == '未付款'">
        <div class="join-tuan">
          <h3>还差<span class="main-tcor">{{ details.pt_info.surplus_number }}人</span>成团</h3>
          <p>距结束还剩
            <span class="date-nums date-pt-list">
              <countdown :time="new Date(details.pt_info.end_time) - new Date()">
                <template slot-scope="props">
                  <span v-html="CountdownTime(props)"></span>
                </template>
              </countdown>
            </span>
           </p>
        </div>
        <ul class="avatars">
          <li v-for="i in details.pt_info.pt_user_list"><img class="max" :src="i"></li>
          <li v-for="i in details.pt_info.surplus_number"></li>
        </ul>
        <!-- <div class="pull-arrow pull-down">
          查看所有参团成员▼
        </div>
        <div class="pull-arrow pull-up">
          收起▲
        </div> -->
        <div class="btn-submit" v-if="details.pt_status == '未付款'" @click="clickPay">
          去支付
        </div>
        <div class="btn-submit" @click="invitation()" v-if="details.pt_info.surplus_number > 0 && details.pt_status != '未付款' && !$route.query.pt_code">
          邀请好友参团
        </div>
        <div class="btn-submit" @click="ImjoinPt()" v-else-if="details.pt_info.surplus_number > 0 && $route.query.pt_code">
          立即参团
        </div>
      </div>


      <div class="" v-if="details.pt_info.pt_status == '拼团成功'">
        <div class="join-tuan">
          <h3> <img class="icon-clock" src="/static/pingtuan/details_icon_time@2x.png"> 本轮拼团已结束</h3>
          <p class="tips">拼团成功～商家将按付款顺序在3-5个工作日内发货 </p>
        </div>
        <ul class="avatars">
          <li v-for="i in details.pt_info.pt_user_list"><img class="max" :src="i"></li>
        </ul>
        <div class="btn-submit plain"  @click="fnOpenOrderDetail()">
          查看订单
        </div>
      </div>

    <div class="" v-if="details.pt_info.pt_status == '拼团失败'">
      <div class="join-tuan">
        <h3> <img class="icon-clock" src="/static/pingtuan/details_icon_time@2x.png"> 本轮拼团已结束</h3>
        <p class="tips">哎呀～拼团时间已过，人数不够！ </p>
      </div>
      <ul class="avatars">
        <li v-for="i in details.pt_info.pt_user_list"><img class="max" :src="i"></li>
      </ul>
      <div class="btn-submit plain"  @click="fnOpenOrderDetail()">
        查看订单
      </div>
    </div>
    </div>

    <div class="rules">
      <div class="title">
        拼团玩法
      </div>
      <div class="btn-rules" @click="MaskRulesEvent">
        规则
      </div>
      <ul class="rules-list">
        <li>
          <span class="num">1</span>
          <div class="text">
            选择商品 <br>
            下单支付
          </div>
        </li>
        <li>
          <span class="num">2</span>
          <div class="text">
            邀请好友 <br>
            参团支付
          </div>
        </li>
        <li>
          <span class="num">3</span>
          <div class="text">
            人满成团 <br>
            失败退款
          </div>
        </li>
      </ul>
    </div>
    <MaskRules ref="MaskRules" content="规则" />
  </div>
</template>

<script>
import MaskRules from './components/MaskRules'
import { myPtStartDetail, ptOrderPay } from '@/api/pingtuan'
import { Toast } from "mint-ui";
export default {
  components: {
    MaskRules,
  },
  data() {
    return {
      goodsId: null,
      orderId: this.$route.query.order_id,
      details: null,
    }
  },
  created() {
    this.myPtStartDetail()
  },
  methods: {
    invitation() {
      Toast('请在右上角“...”微信分享给朋友！')
    },
    // 邀请好友
    invitationShare() {
      // 设置微信分享内容
      let wxShareOpt = {
        title: this.details.pt_goods_name,
        desc: "您的好友邀请您参加拼团，优惠多多，快来参加吧！",
        link: window.location.href.split("#")[0]+'&pt_code='+this.details.pt_code+'&master_openid='+this.getUserInfo().openid,
        img: this.details.goods_icon
      };
      console.log(wxShareOpt)
      this.wxShare(wxShareOpt);
    },
    fnOpenOrderDetail() {
      this.$router.push({
        path: "/pingtuan/order/detail",
        query: {
          order_no: this.details.pt_order_code,
          order_id: this.details.id,
        }
      });
    },
    myPtStartDetail() {
      myPtStartDetail({ pt_id: this.orderId }).then(res=>{
        this.details = res.data;
        this.invitationShare()
      })
    },
    // 加入拼团
    ImjoinPt() {
      this.$router.push({
        path: "/pingtuan/goods",
        query: {
          goodsId: this.details.pt_goods_norm_id,
          pt_code: this.details.pt_code,
        }
      });
    },
    // 显示拼团规则弹框
    MaskRulesEvent() {
      this.$refs.MaskRules.MaskRulesEvent()
    },
    // 立即支付
    clickPay() {
      var _this = this;
      ptOrderPay({
        openid: this.getUserInfo().openid,
        order_code: '['+ this.$route.query.order_id + ']',
        pay_type: 'pt_goods',
        total_fee: this.details.pt_price,
      }).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.wxChooseWXPay({
            appId: res.data.appid,
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            sign: res.data.sign,
            package: res.data.package,
            callback: function(res) {
              _this.payStatusSuccess(res);
            },
            errCallback: function() {
              _this.payStatusFail();
            }
          })
        }else{
          Toast(res.msg)
          // 1s后调转到支付状态页面
          setTimeout(()=>{
            this.$router.push({
              path: '/pingtuan/payStatus',
              query: {
                payStatus: 'fail',
                orderCode: this.$route.query.order_id
              }
            })
          }, 2000)
        }
      })
    },

    // 支付成功
    payStatusSuccess(res) {
      var _this = this;
      if(res && res.errMsg == "chooseWXPay:ok"){
        Toast({
          message: "支付成功",
          duration: 2000
        });

        // 2s后调转到支付状态页面
        setTimeout(()=>{
          _this.$router.push({
            path: '/pingtuan/payStatus',
            query: {
              payStatus: 'success',
              orderCode: this.$route.query.order_id
            }
          })
        }, 2000)
      }else{
        this.payStatusFail('fail');
      }
    },

    // 支付失败
    payStatusFail(val) {
      var _this = this;
      Toast({
        message: val == 'fail'?'支付失败':'取消支付',
        duration: 2000
      });

      // 2s后调转到支付状态页面
      setTimeout(()=>{
        _this.$router.push({
          path: '/pingtuan/payStatus',
          query: {
            payStatus: 'fail',
            orderCode: this.$route.query.order_id
          }
        })
      }, 2000)
    }
  },
}
</script>

<style lang="scss">
@import '@/styles/pingtuan/common.scss';
</style>

<style lang="scss" scoped>
$MainColor: #FF0A14;

.main-tcor{
  color: $MainColor;
}
.pingtuan-detail{
  .pull-arrow{
    text-align: center;
    color: #999999;
    margin-bottom: .6rem;
  }
  .icon-clock{
    vertical-align: middle;
    width: .5rem;
    height: .5rem;
    margin-top: -.1rem;
    display: inline-block;
  }
  .goods{
    background-color: #fff;
    overflow: hidden;
    padding: .4rem;
    position: relative;
    margin: .3rem 0;
    .pic{
      width: 2.4rem;
      float: left;
    }
    .content{
      width: 6rem;
      float: left;
      margin-left: .3rem;
      .title{

      }
      .nums{
        margin-top: .2rem;
        margin-bottom: .3rem;
        .btn{
          display: inline-block;
          padding: .1rem .2rem;
          font-size: .32rem;
          margin-right: .3rem;
        }
        .btn-already{
          background-color: $MainColor;
          color: #fff;
        }
        .btn-total{
          color: $MainColor;
          border: 1px solid $MainColor;
          padding-top: .05rem;
          margin-bottom: .05rem;
        }
      }
      .present-price{
        float: left;
        span{
          font-size: .5rem;
          color: $MainColor;
          em{
            font-style: normal;
            font-size: .44rem;
          }
        }
        margin-right: .3rem;
      }
      .purchase-price{
        float: left;
        color: #A09A9B;
        margin-top: .15rem;
        font-size: .32rem;
        span{
          text-decoration: line-through;
        }
      }
    }
    .icon{
      position: absolute;
      right: .4rem;
      bottom: .8rem;
      width: 1.5rem;
    }
  }

  .main{
    background-color: #fff;
    margin-bottom: .3rem;
    padding: .6rem 1rem;
    padding-top: .2rem;
    .join-tuan{
      text-align: center;
      h3{
        font-size: .44rem;
        font-weight: 600;
        margin-top: .6rem;
      }
      p{
        color: #666666;
        margin-top: .2rem;
        margin-bottom: .2rem;

        span{
          color: #353333;
        }
      }
      .tips{
        font-size: .3rem;
        color: #999999;
      }
    }
  }


  .btn-submit{
    background-color: $MainColor;
    color: #fff;
    border-radius: 1rem;
    text-align: center;
    display: inline-block;
    width: 100%;
    line-height: 1.2rem;
    margin-top: .4rem;
  }

  .btn-submit.plain{
    color: $MainColor;
    border: 1px solid $MainColor;
    background-color: #fff;
  }

  .rules{
    background-color: #fff;
    padding: .4rem .5rem;
    position: relative;
    .title{
      text-align: center;
      margin-bottom: .4rem;
      position: relative;
      font-size: .4rem;
      margin-top: .3rem;
      &::before,&::after{
        position: absolute;
        height: 1px;
        width: 2.8rem;
        background-color: #ddd;
        top: 50%;
        content: "";
      }
      &::before{
        left: .4rem;
      }
      &::after{
        right: .4rem;
      }
    }
    .btn-rules{
      position: absolute;
      right: 0;
      top: .6rem;
      color: #F4BA5E;
      padding: .14rem .2rem;
      border-radius: .5rem 0 0 .5rem;
      padding-left: .3rem;
      font-size: .3rem;
      background-color: #FCEDD5;
    }
    .rules-list{
      display: flex;
      position: relative;
      margin-bottom: 1rem;
      &::before{
        position: absolute;
        content: "";
        left: 1.5rem;
        top: .17rem;
        width: 6rem;
        height: .2rem;
        background: -webkit-linear-gradient(right, #FF8454, #EF4E15);
        background: linear-gradient(right, #FF8454, #EF4E15);
      }
      li{
        flex: 1;
        text-align: center;
        .num{
          display: inline-block;
          width: .5rem;
          height: .5rem;
          background-color: $MainColor;
          border-radius: 50%;
          font-size: .26rem;
          color: #fff;
          margin-bottom: .2rem;
          position: relative;
          z-index: 2;
          line-height: .5rem;
        }
        .text{
          font-size: .3rem;
          line-height: .5rem;
        }
      }
    }
  }
}
</style>
